<template>
	<view class="jobPay">
		<view class="navSearch">
			<u-navbar :placeholder="true" leftText="" title="综合薪资" auto-back>
				<template #left>
					<view class="" @click="back">
						<u-icon name="arrow-left" size="22"></u-icon>
					</view>
				</template>
				<template #right>
					<view class="subBtn" @click="editFun">确认</view>
				</template>
			</u-navbar>
		</view>
		
		<view class="main" >
			<u--form :model="form" :rules="Rules" ref="form" labelPosition="top" labelWidth="150" class='form'>
				<u-form-item class="formItem" label="" prop="title" @click="toPopup">
					<template #label>
						<view class="r-flex-between-center">
							<view class="">
								<text>*</text>
								<text>综合薪资</text>
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</template>
					<text v-if="state.comprehensiveSalaryType == 0" class="money">面议</text>
					<text class="money" v-else>{{state.comprehensiveSalaryStart}}-{{state.comprehensiveSalaryEnd}}元/月</text>
					<!-- <u--input  border="none" disabled disabledColor="#fff" placeholder="面议" ></u--input> -->
				</u-form-item>
			</u--form>
			<view class="tip">你还可以补充以下信息(选填)</view>
			<view class="info">
				<view class="title1">你会给员工提供以下哪些福利待遇？</view>
				<view class="title2">基础福利</view>
				<view class="fl">
					<text v-for="(item,idx) in state.list" :key="idx" @click="checkFl(item,idx)" :class="item.checked?'actived':''">{{item.name}}</text>
				</view>
			</view>
		</view>
		
		
		<u-popup :show="state.show" @close="close" @open="open" :round="10" >
			<view class="popup-box">
				<view class="header">
					<text @click="close">取消</text>
					<text>综合薪资</text>
					<text @click="submit">确认</text>
				</view>
				<view class="popup-main">
					<u-radio-group
					    v-model="state.comprehensiveSalaryType"
					    placement="column"
					    @change="groupChange"
					  >
						<view class="left">
							<u-radio :name="1"></u-radio>
							<u--input
								placeholder="最低薪资"
								border="none"
								v-model="state.comprehensiveSalaryStart"	
							  ></u--input>-
							<u--input 
							  placeholder="最高薪资"
							  v-model="state.comprehensiveSalaryEnd"
							  border="none"
							></u--input>
						</view>
						<view class="right">
							<u-radio :name="0"></u-radio>
							<text>面议</text>
						</view>
					  
					  </u-radio-group>	
				</view>
			</view>
		</u-popup>
	</view>
	
</template>

<script lang="ts" setup>
	import {reactive,ref} from 'vue'
	import {useRouter} from 'uni-mini-router'
	import {getCurrentInstance} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {proxy} = getCurrentInstance()
	const router = useRouter()
	let form = ref({
		xz:''
	})
	let state = reactive({
		comprehensiveSalaryType:0,
		comprehensiveSalaryStart:'',
		comprehensiveSalaryEnd:'',
		basicBenefits:[],
		show:false,
		type:0,
		list:[
			{name:'五险一金',checked:false},{name:'包住',checked:false},{name:'餐补',checked:false},
			{name:'双休',checked:false}
		]
	})
	let Rules = ref({
		type: {},
		title: {
			required: true,
			message: '请输入正确内容',
			trigger: ['change']
		},
		description: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		project: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		zili: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		anli: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		fangshi: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		human: {
			required: true,
			message: '请输入正确内容',
			trigger: ['change']
		},
		phone: [{
			required: true,
			message: '手机号码必填',
		},
		{
			validator: (rule, value, callback) => {
				console.log(value);
				return validatePhoneNumber(value);
			},
			message: '手机号码不正确',
			trigger: ['change'],
		}],
	})
	const back = () => {
		router.back()
	}
	
	const open = () =>{
	  // console.log('open');
	}
	const close = () =>{
	  state.show = false
	  // console.log('close');
	}
	const submit = ()=>{
		if(state.comprehensiveSalaryType == 0){
			state.comprehensiveSalaryStart = ''
			state.comprehensiveSalaryEnd = ''
		}else if(state.comprehensiveSalaryType == 1){
			if(!state.comprehensiveSalaryStart){
				uni.showToast({
					title: '请填写最低薪资',
					icon: 'none'
				})
				return
			}else if(!state.comprehensiveSalaryEnd){
				uni.showToast({
					title: '请填写最高薪资',
					icon: 'none'
				})
				return
			}
		}
		state.show = false
		
	}
	const checkFl = (item,i)=>{
		// item.checked = !item.checked
		state.list[i].checked = !state.list[i].checked
		let idx = state.basicBenefits.findIndex(el=>el == item.name)
		if(idx>0){
			state.basicBenefits.splice(idx,1)
		}else{
			state.basicBenefits.push(item.name)
		}
		console.log(state.list,state.basicBenefits)
		
	}
	
	const activedFun = (item)=>{
		let idx = state.basicBenefits.findIndex(el=>el == item.name)
		if(idx>0){
			return 'actived'
		}else{
			return ''
		}
	}
	const groupChange = (n) =>{
		console.log('groupChange', n);
	}
	const toPopup = ()=>{
		state.show = true
	}
	// 修改数据
	const editFun = ()=>{
		let params = {
			pageType:'jobPay',
			comprehensiveSalaryType:state.comprehensiveSalaryType,
			comprehensiveSalaryStart:state.comprehensiveSalaryStart,
			comprehensiveSalaryEnd:state.comprehensiveSalaryEnd,
			basicBenefits:state.basicBenefits.length>0?state.basicBenefits.join(','):'',
		}
		router.push({
			name:'addJob',
			params:params
		})
		// proxy.$req('POST', proxy.$api.meiyeRecruitHunterInfo2edit,personInfoData.info).then((res) => {
		// 	if(res.code === 200){
		// 		back()
		// 	}
		// })
	}
	
	onLoad(()=>{
		if(uni.getStorageSync('jobInfo') && uni.getStorageSync('jobInfo')!=''){
			let jobInfo = JSON.parse(uni.getStorageSync('jobInfo'))
			console.log(jobInfo,'jobInfo')
			state.basicBenefits = jobInfo.basicBenefits!=''?jobInfo.basicBenefits.split(','):[]
			state.comprehensiveSalaryType = jobInfo.comprehensiveSalaryType
			state.comprehensiveSalaryStart = jobInfo.comprehensiveSalaryStart
			state.comprehensiveSalaryEnd = jobInfo.comprehensiveSalaryEnd
			
			state.list.forEach(el=>{
				let idx = state.basicBenefits.findIndex(item=>item == el.name)
				if(idx!=-1){
					el.checked = true
				}
			})	
		}	
	})
</script>

<style lang="scss" scoped>
	.jobPay{
		.navSearch {
			width: 100%;
			border-bottom: 1rpx solid #D7D7D7;
			.subBtn {
				width: 104rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				background: rgba(255, 255, 255, 0);
				border: 1rpx solid rgba(0, 0, 0, 0.25);
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.65);
				border-radius: 8rpx;
			}
		}
		
		.main{
			.form{
				padding:20rpx;
				
				.money{
					color:#CCCCCC;
					margin-top:20rpx;
				}
			}
			// padding:20rpx;
			.tip{
				padding:0 20rpx;
				height:80rpx;
				line-height: 80rpx;
				color:#999999;
				font-size:28rpx;
				background:#f1f3f4;
			}
			.info{
				padding:20rpx;
				.title1{
					color:#999999;
					font-size:28rpx;
					margin-bottom: 20rpx;
				}
				.title2{
					font-size:32rpx;
					margin-bottom:36rpx;
				}
				
				.fl{
					display:flex;
					flex-wrap: wrap;
					text{
						padding:18rpx 24rpx;
						background:#EEEEEE;
						margin-right:20rpx;
						margin-bottom:20rpx;
						border-radius: 8rpx;
					}
					.actived{
						background:#d4e4fff7;
					}
				}
				
			}
		}
		
	}
	.popup-box{
		height:400rpx;
		.header{
			display:flex;
			justify-content: space-between;
			padding:10rpx ;
			text:nth-child(1){
				font-size:24rpx;
				color:#8E8E93;
			}
			text:nth-child(2){
				font-size:30rpx;
			}
			text:nth-child(3){
				font-size:24rpx;
			}
		}
		
		.popup-main{
			display:flex;
			justify-content: space-between;
			padding:0 20rpx;
			.left{
				display:flex;
				margin:20rpx 0;
				// width:70%;
			}
			.right{
				display:flex;
				// justify-content:flex-end;
				align-items: center;
				color: rgb(192, 196, 204);
				// flex:1;
				// padding-right:20rpx;
			}
		}
		
	}
	
</style>